<template>
  <div class="doc-preview-container">
    <div class="loading-view" v-if="isLoading">
      <van-loading />
      <p>正在加载中...</p>
    </div>

    <div class="content" v-else>
      <iframe v-if="isUseiFrame" :src="ifrmaeFileSrc"></iframe>
      <div v-else>
        <img
          v-for="(url, index) of cp_images"
          :src="url"
          @click="previewlargeImages(index)"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, defineProps, computed } from "vue";
import convertPdfToImage from "@/utils/pdfToImg";
import { showImagePreview } from "vant";

const cp_images = computed(() => {
  if (imgArray.value.length > 0) return imgArray.value;
  if (props.images && props.images.length > 0) return props.images;
});

const imgArray = ref([]);
const isLoading = ref(false);
const props = defineProps({
  url: {
    type: String,
    required: true,
    default: "",
  },
  fileName: {
    type: String,
  },
  images: {
    type: Array,
  },
});

async function getImgArray() {
  isLoading.value = true;
  const array = await convertPdfToImage(props.url);
  console.log("onMounted convertPdfToImage :>> ", array);
  imgArray.value = array;
  isLoading.value = false;
}

function previewlargeImages(index) {
  showImagePreview({
    images: imgArray.value,
    startPosition: index,
  });
}

function getFileType(fileName) {
  if (!fileName) return "Unknown";
  if (fileName.endsWith(".pdf")) {
    return "PDF";
  } else if (fileName.endsWith(".doc") || fileName.endsWith(".docx")) {
    return "Word";
  } else if (fileName.endsWith(".xls") || fileName.endsWith(".xlsx")) {
    return "Excel";
  } else if (
    fileName.endsWith(".png") ||
    fileName.endsWith(".jpg") ||
    fileName.endsWith(".jpeg")
  ) {
    return "Image";
  } else {
    return "Unknown";
  }
  //else if (fileName.endsWith(".ppt") || fileName.endsWith(".pptx")) {
  //   return "PPT";
  // }
}

const isUseiFrame = computed(() => {
  if (!props.fileName) return true;
  const fileType = getFileType(props.fileName);
  if (fileType === "PDF") return false;
  return true;
});

const ifrmaeFileSrc = computed(
  //     https://view.officeapps.live.com/op/view.aspx?src=https://meetdev.yxt.com/rest/conference/2fc5f3fafc08440daefe1be2a5386639/file/doc/796b62ad-9e2d-4911-aa32-1243d425a677/export
  () => `https://view.officeapps.live.com/op/view.aspx?src=${props.url}`
);

onMounted(() => {
  if (getFileType(props.fileName) === "PDF") {
    getImgArray();
  }
});
</script>

<style scoped>
.doc-preview-container iframe {
  width: 100%;
  height: 100vh;
  background-color: white;
  box-sizing: border-box;
  border: none;
  overflow: hidden;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

iframe::-webkit-scrollbar {
  display: none; /* Chrome, Safari, and Opera */
}

img {
  border-radius: 4px;
  border: 1px solid #e9e9e9;
  margin-bottom: 16px;
}

.loading-view {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 300px;

  p {
    color: darkgray;
    margin-top: 16px;
  }
}
</style>
